<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootcss/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<!--bootstrap有一个大盒子container，把这个盒子平均分为12份-->
		<div class="container">
			<!--有列的地方先用行包裹-->
			<div class="row">

				<!--header部分-->
				<header class="col-md-2 hea">
					<div class="logo">
						<a href="#">
							<img src="../../js/img/1.jpeg" / class="hidden-xs">
							<span class="visible-xs">阿里百秀</span>
						</a>
					</div>
					<div class="nav">
						<ul>
							<li>
								<a href="#" class="glyphicon glyphicon-camera">
									<!--<img src="../../京东案例/images/举报app.png"/>-->
									生活馆
								</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-camera">
									<!--<img src="../../京东案例/images/举报app.png"/>-->

									自然汇
								</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-camera">
									<!--<img src="../../京东案例/images/举报app.png"/>-->

									科技潮
								</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-camera">
									<!--<img src="../../京东案例/images/举报app.png"/>-->

									奇趣事
								</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-camera">
									<!--<img src="../../京东案例/images/举报app.png"/>-->

									美食杰
								</a>
							</li>
						</ul>
					</div>

				</header>

				<!--article部分-->
				<article class="col-md-7 arti">
					<div class="row">
						<div class="col-md-6 img1">
							<img src="../../京东案例/images/中间广告1.png" />
							<div class="ali">
								阿里百秀
							</div>
						</div>
						<div class="col-md-6 uls">
							<ul>
								<li class="li1">
									<img src="../../京东案例/images/中2.png" />
									<div class="paciti">世界真美令人惊叹卫星拍地球风景地貌
									</div>
								</li>
								<li class="li1">
									<img src="../../京东案例/images/中2.png" />
									<div class="paciti">
										世界真美令人惊叹卫星拍 地球风景地貌
									</div>

								</li>
								<li class="li1">
									<img src="../../京东案例/images/中2.png" />
									<div class="paciti">
										世界真美令人惊叹卫星拍 地球风景地貌
									</div>

								</li>
								<li class="li1">
									<img src="../../京东案例/images/中2.png" />
									<div class="paciti">
										世界真美令人惊叹卫星拍 地球风景地貌
									</div>

								</li>
							</ul>
						</div>

					</div>
				</article>

				<!--aside-->
				<aside class="col-md-3 asi">
					<div class="t">
						<div class="chinaboke">
							<img src="../../登录/images/2.jpeg" />
						</div>
						<div class="hot">
							<h4>欢迎加入中国博客联盟</h4>
							<p>这里收录国内各个领域的优秀博客,是一个全人工 编辑的开放式博客联盟交流和展示平台的开放式博客联盟交流和展示平台
							</p>
							<div class="hotwords">
								热搜
							</div>
						</div>
					</div>

				</aside>
			</div>
		</div>
	</body>

</html>